<style >
.mapBox {
  padding: 0 30px;
}
#mapSvg .nodetext {
  font-size: 12px;
  font-family: SimSun;
  fill: #000000;
}
#mapSvg .linetext {
  font-size: 12px;
  font-family: SimSun;
  fill: #1f77b4;
  fill-opacity: 0;
}

#mapSvg .circleImg {
  /*stroke: #ff7f0e;*/
  stroke-width: 3px;
}
#mapSvg .relative {
  /*position: relative;*/
}
#mapSvg #d3 {
  box-sizing: border-box;
  display: block;
  position: relative;
  /*top: -260px;*/
  z-index: 0;
}
#mapSvg #d3 svg {
  box-sizing: border-box;
  display: block;
}
#mapSvg .ceshi {
  box-sizing: content-box;
  display: block;
  height: 900px;
}

#mapSvg .node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 3px;
}

#mapSvg .node {
  font: 12px sans-serif;
}
.red{
  color:red;
  background-color: red;
}
#mapSvg .link {
  fill: none !important;
  stroke: #ccc !important;
  stroke-width: 3px !important;
}
#mapSvg .d1 {
  stroke: #e00001 !important;
  fill: #e00001 !important;
}
#mapSvg .d2 {
  fill: #fe8400 !important;
  stroke: #fe8400 !important;
}
#mapSvg .d3 {
  fill: #ffd700 !important;
  stroke: #ffd700 !important;
}
#mapSvg .d4 {
  fill: #86da0f !important;
  stroke: #86da0f !important;
}
#mapSvg .d5 {
  fill: #24b9fe !important;
  stroke: #24b9fe !important;
}
#mapSvg .d6 {
  fill: #2bebd2 !important;
  stroke: #2bebd2 !important;
}
#mapSvg .d7 {
  fill: #ae59ee !important;
  stroke: #ae59ee !important;
}
#mapSvg .d8 {
  fill: #ff6dbc !important;
  stroke: #ff6dbc !important;
}
#mapSvg .d9 {
  fill: #7f6ffa !important;
  stroke: #7f6ffa !important;
}
#mapSvg .lizhi1 {
  fill: rgb(153, 153, 153) !important;
  stroke: rgb(153, 153, 153) !important;
}

#mapSvg .aaa {
  /* height:950px; */
}
/* #mapSvg .biaoshi .juese:before {
  content: " ";
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 3px solid red;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 5px;
} */
#mapSvg .yuan {
  content: " ";
  width: 15px;
  height: 15px;
  display: inline-block;
  border: 3px solid red;
  vertical-align: middle;
  border-radius: 50%;
  margin-left:10px;
}
#mapSvg .aaa svg {
  /*padding-top: 10px;*/
  overflow: initial;
}
#mapSvg .biaoshi {
  background-color: #fff;
  height: 40px;
  line-height: 40px;
  text-align: right;
  padding-right: 15px;
}
#mapSvg .biaoshi .juese {
}
/* #mapSvg .biaoshi .juese:nth-child(1):before {
  border-color: #e00001;
  background-color: #e00001;
}
#mapSvg .biaoshi .juese:nth-child(2):before {
  border-color: #fe8400;
  background-color: #fe8400;
}
#mapSvg .biaoshi .juese:nth-child(3):before {
  border-color: #ffd700;
  background-color: #ffd700;
}
#mapSvg .biaoshi .juese:nth-child(4):before {
  border-color: #86da0f;
  background-color: #86da0f;
}
#mapSvg .biaoshi .juese:nth-child(5):before {
  border-color: #24b9fe;
  background-color: #24b9fe;
}
#mapSvg .biaoshi .juese:nth-child(6):before {
  border-color: #2bebd2;
  background-color: #2bebd2;
}
#mapSvg .biaoshi .juese:nth-child(7):before {
  border-color: #ae59ee;
  background-color: #ae59ee;
}
#mapSvg .biaoshi .juese:nth-child(8):before {
  border-color: #ff6dbc;
  background-color: #ff6dbc;
}
#mapSvg .biaoshi .juese:nth-child(9):before {
  border-color: #7f6ffa;
  background-color: #7f6ffa;
} */

#mapSvg .biaoshi .yuan.lizhi{
  border-color: rgb(153, 153, 153);
  background-color: rgb(153, 153, 153);
}
#mapSvg .biaoshi .juese#jueseNo {
  fill: #fff !important;
  stroke: steelblue !important;
  stroke-width: 3px !important;
}
.line {
  height: 0px;
  border-bottom: 1px solid #ddd;
}
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="mapBox">
            <h3 class="search-h3">快速搜索</h3>
        </div>
        <div class="common-box-body mapBox">
          <div class="common-box-body mapBox">
            <Row>
                <Form >
                    <Col :lg="6" :md="24">
                        <FormItem label="分支结构">
                            <Select v-model="yun_org_id">
                                <Option value="0">本公司</Option>
                                <Option v-for="item in allJG" :value="item._id" :key="item._id">{{item.shortn}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :lg="6" :md="24">
                        <FormItem label="在职状态">
                            <Select v-model="status">
                                <Option value="1">在职</Option>
                                <Option value="0">全部</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :lg="6" :md="24">
                        <FormItem >
                            <Select @on-change="resetMap" v-model="zhiji">
                                <Option value="工号">工号</Option>
                                <Option value="职级">职级</Option>
                                <Option value="分部">分部</Option>
                                <Option value="分支机构">分支机构</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :lg="6" :md="24" style="text-align:right;">
                        <Button type="primary" icon="ios-search" @click="getdata">搜索</Button>
                        <!-- <Button class="tRight" @click="$router.back(-1)" type="info" size="large">返回</Button> -->
                    </Col>
                </Form>
            </Row>
            <Row>
                <div class="line"></div>
            </Row>
            <Row>
                <div id="mapSvg" class="mapBox">
                    <div class="biaoshi">
                        <template v-for="(item,index) in biaoshi">
                          <span class="yuan" :class="'a'+item.id"></span>
                          <span  class="juese" >{{item.name}}</span>
                        </template>
                        <template>
                          <span class="yuan lizhi"></span>
                          <span class="lizhi">离职 </span>
                        </template>
                    </div>
                    <div class="mountNode" id="mountNode" ref="mountNode" ></div>
                </div>
            </Row>
        </div>
        </div>
    </div>
</template>
<script>
import * as d3 from "d3";
import productTitle from "../../components/productTitle";
import { bloodMap, frameworkMap, allJG,map } from "../../api/employee";
import G6 from "@antv/g6";
export default {
  data() {
    return {
      datacount:0,
      color:{},
      status: "1",
      biaoshi: [],
      allJG: [],
      yun_org_id: "0",
      one: false,
      zhiji: "",
      data:{},
      g6:{}
    };
  },
  components: {
    productTitle
  },
  created() {
    
  },
  methods: {
    alljiG() {
      new Promise((rev, rej) => {
        allJG()
          .then(res => {
            if (res.data.err == 0) {
              this.allJG = JSON.parse(JSON.stringify(res.data.data));
            } else {
              this.$Message("暂无可选机构");
            }
            rev();
          })
          .catch(error => {
            rej(error);
          });
      });
    },
    getdata(){
      this.$refs.mountNode.innerHTML = "";
      this.data=[];
    var data={
                status:this.status,
                yun_org_id:this.yun_org_id
            }
      new Promise((rev, rej) => {
        map(data)
          .then(res => {
            if (res.data.err == 0) {
              this.datacount = res.data.count;
                this.data = JSON.parse(JSON.stringify(res.data.data));
                var dom = document.createElement('style');
                let str = "";
                var _this =this;
                console.log(res.data.data);
                this.biaoshi = res.data.rank_data;
              for(var i=0;i<res.data.rank_data.length;i++){
                if(i==0){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#e00001 !important;background-color:#e00001 !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#e00001';
                  _this.color[key]=val;
                }
                if(i==1){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#fe8400 !important;background-color:#fe8400 !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#fe8400';
                  _this.color[key]=val;
                }
                if(i==2){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#ffd700 !important;background-color:#ffd700 !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#ffd700';
                  _this.color[key]=val;
                }
                if(i==3){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#86da0f !important;background-color:#86da0f !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#86da0f';
                  _this.color[key]=val;
                }
                if(i==4){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#24b9fe !important;background-color:#24b9fe !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#24b9fe';
                  _this.color[key]=val;
                }
                if(i==5){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#2bebd2 !important;background-color:#2bebd2 !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#2bebd2';
                  _this.color[key]=val;
                }
                if(i==6){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#ae59ee !important;background-color:#ae59ee !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#ae59ee';
                  _this.color[key]=val;
                }
                if(i==7){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#ff6dbc !important;background-color:#ff6dbc !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#ff6dbc';
                  _this.color[key]=val;
                }
                if(i==9){
                  str+='.a'+res.data.rank_data[i].id+"{"+"border-color:#ff6dbc !important;background-color:#ff6dbc !important;}";
                  var key = 'a'+res.data.rank_data[i].id;
                  let val='#ff6dbc';
                  _this.color[key]=val;
                }
              }
              
              dom.innerHTML = str;
              document.getElementsByTagName('head')[0].appendChild(dom);
              this.makeMap(this.data);
            } else {
              this.$Message("暂无可选机构");
            }
            rev();
          })
          .catch(error => {
            rej(error);
          });
      }); 
    },
    makeMap(data) {
      let _this = this;
      var data = data;
      G6.registerNode("treeNode", {
        anchor: [[0, 0.5], [0.5, 1]]
      });
      function xunhuan(d){
        if (d.children) {
          d._children = d.children;
          d._children.forEach(collapse);
          d.children = null;
        }
      }
      G6.registerEdge("VH", {
        getPath: function getPath(item) {
          var points = item.getPoints();
          var start = points[0];
          var end = points[points.length - 1];
          return [
            ["M", start.x, start.y],
            ["L", start.x, end.y],
            ["L", end.x, end.y]
          ];
        }
      });
      var layout = new G6.Layouts.IndentedTree({
        direction: "LR", // 方向（LR/RL/H）
        indent: 30, // 缩进量
        getVGap: function getVGap() /* d */ {
          // 竖向间距
          return 4;
        }
      });
      _this.g6 = layout;
      //暂时  写死为 2000
      var total = _this.datacount; 
      console.log(total);
      var height = total * 28;
      console.log(height);
      var tree = new G6.Tree({
        id: "mountNode", // 容器ID
        height: height, // 画布高
        layout: layout, // 缩进树布局
        fitView: false // 自动缩放
      });
      tree
        .node({
          shape: "treeNode",
          size: 16,
          color: function(d) {
            //这里可以更改 圆圈颜色
            if(d.status==2){
              return 'rgb(153, 153, 153)';
            }
            return _this.color['a'+d.rank_id];
          }
        })
        .label(function(obj) {
          //这里可以更改显示 文字
           var str ="";
           if(!obj.name){
             return '无名'
           }
           if(_this.zhiji=='工号'){
               str = obj.name+'('+obj.job_code+')';
           }else if(_this.zhiji=='职级'){
               str = obj.name+'('+obj.rank_name+')';
           }else if(_this.zhiji=='分部'){
               str = obj.name+'('+obj.branch+')';
           }else if(_this.zhiji=='分支机构'){
               str = obj.name+'('+obj.org_name+')';
           }else{
             return obj.name;
           }
           
           return str;
        });
      tree.edge({
        shape: "VH"
      });
      tree.on("afterchange", function() {
        tree.getNodes().forEach(function(node) {
          var model = node.getModel();
          var label = node.getLabel();
          var keyShape = node.getKeyShape();
          var children = node.getChildren();
          var parent = node.getParent();
          var box = keyShape.getBBox();
          var labelBox = label.getBBox();
          var dx =
            (box.maxX - box.minX + labelBox.maxX - labelBox.minX) / 2 + 8;
          var dy = 0;
          label.translate(dx, dy);
        });
        tree.draw();
      });
      tree.read({
        roots: [data]
      });
    },
    resetMap() {
      console.log(this.zhiji);
      this.$refs.mountNode.innerHTML = "";
      let _this = this;
      this.data=[];
      setTimeout(function(){ _this.getdata();},2000);
    }
  },
  mounted() {
    this.alljiG();
    this.getdata();
    // this.makeMap(this.data);
  }
};
</script>